ofa.js |
您所在的位置：网站首页 › ofo 怎么读 › ofa.js |
ofa.js
ofa.js
不需要打包的 MVVM JavaScript 框架
无需繁琐学习，无需 npm、nodejs、webpack，即刻上手
案例教程 基于 Web Components ofa.js 基于 Web Components 开发。以下是支持的平台和时间，你可以立即体验下载初始化项目 在线查看初始化项目 极低使用门槛与其他前端框架不同，使用基于ofa.js开发的组件无需阅读繁杂入门指南。立刻创建一个 HTML 文件，体验一下“一拳撞飞logo”的组件。 
不加班了
下班给我 迟点下班 周末加班 一步封装组件，摆脱繁琐流程以往的 Web Components 封装涉及繁杂的知识学习，而现在，只需一个文件。 .switch { position: relative; display: inline-block; width: 60px; height: 34px; background-color: #ccc; transition: background-color 0.4s; border-radius: 34px; cursor: pointer; } .slider { position: absolute; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: transform 0.4s; border-radius: 50%; } .switch.checked { background-color: #2196f3; } .switch.checked .slider { transform: translateX(26px); } export default { tag: "my-switch", data: { checked: true, }, }; 提供多样便捷的模板语法 渲染文本: {{txt}} export default { tag: "text-demo", data: { txt:"我是txt" }, }; export default { tag: "prop-demo", data: { txt1:"我是txt1", txt2:"我是txt2", }, }; {{txt}} export default { tag: "sync-demo", data: { txt:"I am txt", }, }; count: {{count}} count++ export default { tag: "event-demo", data: { count: 0 }, }; {{count}} {{count}} count++ export default { tag: "if-demo", data: { count: 0 }, }; {{$index}} - {{$data.name}} export default { tag: "fill-demo", data: { lists:[{name:"One"}, {name:"Two"}, {name:"Three"}] }, }; 可替代 jQuery 的选择 拥有与 jQuery 类似的 API，让您感受同样的便捷。 // jQuery Code $("#target").html("some html code"); // 设置 html $("#target").text("set text"); // 设置 text var ele_text = $("#target").text(); // 获取 text var parents = $("#target").parents(); // 获取所有父层的数组 var child = $("#target").children()[0]; // 获取第一个子元素 // ofa.js Code $("#target").html = "some html code"; // 设置 html $("#target").text = "set text"; // 设置 text var ele_text = $("#target").text; // 获取 text var parents = $("#target").parents; // 获取所有父层的数组 var child = $("#target")[0]; // 获取第一个子元素 使用案例obook 最简单的文档建站工具
|
【本文地址】